<template>
  <div class="dashboard-editor-container">

    <panel-group/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="chartData"/>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart :radar-data="radarData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :pie-data="pieData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :bar-data="barData"/>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import {getBarData, getPieData, getRadarData, getTrendData} from "@/api/base/datacenter";
import {listMajor} from "@/api/base/major";

const animationDuration = 6000

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      queryParam: {
        semesterIds: []
      },
      chartData: {},
      radarData: {},
      pieData: {},
      barData: {},
      levelList: ['无预警', '1级预警', '2级预警', '3级预警'],
      marjorList: []
    }
  },
  created() {
    this.getMajorList()
    this.getTrendData()
    this.getRadarData()
    this.getPieData()
    this.getBarData()
  },
  methods: {
    getMajorList() {
      listMajor({pageNum: -1}).then(res => {
        this.marjorList = res.rows
      })
    },
    getTrendData() {
      getTrendData(this.queryParam).then(resp => {
        let data = resp.data;
        let xData = this.getLabelFromXData(data.x_data, "semesterName")
        let yData = [];
        for (let i = 0; i < data.y_data.length; i++) {
          let item = {
            name: this.levelList[i],
            type: 'line',
            stack: 'Total',
            data: this.getYData(data.y_data[i]["yAxisData"], "num")
          }
          yData.push(item)
        }
        this.chartData = {
          xAxisData: xData,
          yAxisData: yData
        }
      })
    },
    getRadarData() {
      getRadarData(this.queryParam).then(res => {
        let data = res.data;
        let indicatorData = [
          {name: '平均分', max: data.maxScore},
          {name: '挂科数', max: data.maxFailCount},
          {name: '出勤分', max: data.maxAbsentScore},
          {name: '行为分', max: data.maxBehaviorScore},
          {name: '学分', max: data.maxCreditScore}
        ];
        let seriesData = [
          data.avgScore,
          data.avgFailCount,
          data.avgAbsentScore,
          data.avgBehaviorScore,
          data.avgCreditScore
        ];
        this.radarData = {
          indicatorData: indicatorData,
          seriesData: seriesData
        }
      })
    },
    getPieData() {
      getPieData(this.queryParam).then(res => {
        let data = res.data;
        let xData = this.levelList;
        let pieData = [];
        for (let i = 0; i < data.pie_data.length; i++) {
          let item = {
            name: xData[i],
            value: data.pie_data[i]["num"]
          };
          pieData.push(item)
        }
        this.pieData = {
          xData: xData,
          pieData: pieData
        }
      })
    },
    getBarData() {
      getBarData(this.queryParam).then(res => {
        let data = res.data;
        let xData = this.getLabelFromXData(this.marjorList, "majorName")
        let barData = [];
        for (let i = 0; i < 4; i++){
          let item = {
            name: this.levelList[i],
            type: 'bar',
            stack: 'visitors',
            barWidth: '60%',
            emphasis: {
              focus: 'series'
            },
            data: data.bar_data[i].map(item => item.num),
            animationDuration
          };
          barData.push(item)
        }
        this.barData = {
          xAxisData: xData,
          barData: barData
        }
      })
    },
    getLabelFromXData(xData, labelName = "") {
      return xData.map(item => item[labelName])
    },
    getYData(yData, itemName = "") {
      return yData.map(item => item[itemName])
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
